<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<!-- <view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view> -->
		<view class="filterItem" type="primary">
			<text>
				起始日期
			</text>
			<picker mode="date" :value="startTime" @change="DateChange1">
				<view class="picker">
					{{startTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem" type="primary">
			<text>
				终止日期
			</text>
			<picker mode="date" :value="endTime" @change="DateChange2">
				<view class="picker">
					{{endTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem">
			<!-- <text>
				收银员
			</text> -->
			<!-- <input class="inpt" v-model="OperatorName" name="input" @tap="showEmodal()"></input> -->
			<!-- <view class="selectInput" @tap="chooseModal(0)">
				{{OperatorName==""?'点击选取业务员':OperatorName}}
			</view> -->
			<text>
				收银员
			</text>
			<input type="text" placeholder="点击选择收银员" :value="OperatorName" @tap="chooseModal(0)" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				仓库名称
			</text>
			<input type="text" placeholder="点击选取仓库" :value="StoreName" @tap="chooseModal(1)" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
			<!-- <text>
				仓库名称
			</text> -->
			<!-- <view class="selectInput">
				<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 40px; font-size: 16px;'"
				 :placeholder="'placeholder'" :initValue="'仓库'" :selectHideType="'hideAll'" @change="getSelectValue($event)">
				</xfl-select>
			</view> -->
			<!-- <view class="selectInput" @tap="chooseModal(1)">
				{{StoreName==""?'点击选取仓库':StoreName}}
			</view> -->
		</view>
		<!-- <QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" /> -->
		<!--收银员-->
		<view class="cu-modal" :class=" StoreModal ?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{isStore?'请选择仓库':'请选择收银员'}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="searchStore">
						<input :placeholder="isStore?'请输入仓库名称或编号':'请输入收银员名称'" placeholder-style="text-align: left; font-size: 14px;"
						 v-model="SearchName" @input="filter"/>
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempEList" :key="index" @tap="selectScanGood(index)">{{item.Name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	// import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	import * as Api1 from '@/syApis/syAddOrder/syaddApis.js'
	export default {
		components: {
			// QSpicker,
			// xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				showcxbtn: false,
				StoreModal: false,
				EList: [],
				OperatorName: "",
				EmpID:"",
				isStore:true,
				SearchName:"",
				StoreName:"",
				TempEList:[]
			};
		},
		created() {
			let date = new Date();
			this.getTime()
			// this.GetStoreMessage();
		},
		methods: {
			clearFilter(type){
			    if(type==0){
					this.OperatorName = "";
					this.EmpID = "";
				}else{
					this.StoreName = "";
					this.StoreID = "";
				}
			},
			//过滤条件
			filter(e){
				let TempList = [];
				this.EList.forEach((item,index)=>{
					if(item.Name.indexOf(e.detail.value)>-1){
						TempList.push(item);
					}
				});
				if(TempList.length==0){
					Api.showTip("查无数据");
				}
				this.TempEList = TempList;
			},
			DateChange1(e) {
				this.startTime = e.detail.value
			},
			DateChange2(e) {
				this.endTime = e.detail.value
			},
			getTime() {
				let yyyy = new Date().getFullYear();
				let mm = (new Date().getMonth() + 1)< 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1);
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				this.startTime = yyyy + '-' + mm + '-' + dd;
				this.endTime = yyyy + '-' + mm + '-' + dd;
			},
			//显示仓库
			ShowStore(Filter = '') {
				let data = {
					Filter: Filter
				};
				var that = this;
				Api.GetStoreMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].Name = item.StoreName;
							})
							that.EList = res.data.ResultMsg;
							that.TempEList = res.data.ResultMsg;
							that.SearchName=""
							// that.ClientNameList =JSON.stringify(res.data.ResultMsg) ;
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
			},
			//显示业务员
			ShowOperator(Filter = '') {
				let data = {
					Filter: Filter
				};
				var that = this;
				Api.GetOperatorMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].Name = item.OperatorName;
							})
							that.EList = res.data.ResultMsg;
							that.TempEList = res.data.ResultMsg;
							that.SearchName=""
							// that.ClientNameList =JSON.stringify(res.data.ResultMsg) ;
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
			},
			//打开弹框
			chooseModal(type) {
				switch (type) {
					case 0:
						this.StoreModal = true;
						this.isStore = false
						this.ShowOperator("IsCashier=1")
						break;
			
					case 1:
						this.StoreModal = true;
						this.isStore = true
						this.ShowStore()
						break;
				}
			},
			//关闭弹框
			hideModal() {
				this.StoreModal = false
			},
			selectScanGood(index) {
				console.log(this.EList[index].Name)
			
				this.StoreModal = false
				if (this.isStore == true) {
					this.StoreName = this.TempEList[index].Name
					this.StoreID = this.TempEList[index].StoreID
				} else {
					this.OperatorName = this.TempEList[index].Name
					this.EmpID = this.TempEList[index].OperatorID
				}
			},
			//搜索
			searchStore() {
				// if (this.isStore == true) {
				// 	if (this.SearchEName != '') {
				// 		let Filter = "StoreName like '%" + this.SearchName + "%' or StoreCode like '%" + this.SearchName + "%'";
				// 		this.ShowStore(Filter);
				// 	} else {
				// 		this.ShowStore();
				// 	}
				// } else {
				// 	if (this.SearchEName != '') {
				// 		let Filter = "OperatorName like '%" + this.SearchName + "%' or OperatorID like '%" + this.SearchName + "%'";
				// 		this.ShowOperator(Filter);
				// 	} else {
				// 		this.ShowOperator();
				// 	}
				// }
				let data = {
					detail:{
						value:this.SearchName
					}
				}
				this.filter(data);
			
			},
			//获取仓库档案
// 			GetStoreMessage() {
// 				// let data = {
// 				// 	Filter: Filter
// 				// };
// 				let data ={}
// 				var _this = this;
// 				Api1.GetStoreMessage(data, function(res) {
// 					if (res.state) {
// 						if (res.data.ErrorMsg == '获取登录信息失败') {
// 
// 						} else if (res.data.ErrorMsg != "") {
// 							Api.showTip(res.data.ErrorMsg);
// 						} else {
// 							_this.list = [];
// 							_this.storeList = res.data.ResultMsg;
// 							for (let item in res.data.ResultMsg) {
// 								// //console.tablele(res.data.ResultMsg)
// 								_this.list.push(res.data.ResultMsg[item].StoreName);
// 							}
// 							
// 						}
// 					} else {
// 						Api.ShowTip("服务器开小差了");
// 					}
// 				})
// 			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			// changeDate() {
			// 	var pages = getCurrentPages(),
			// 		prevPage = null;
			// 	if (pages.length > 1) {
			// 		prevPage = pages[pages.length - 2];
			// 	}
			// 	var that = this;
			// 	let data = {
			// 		StartDate: this.startTime,
			// 		EndDate: this.endTime,
			// 		StoreID: this.StoreID,
			// 		EmpID: this.EmpID
			// 	};
			// 	this.$eventHub.$emit('fire', data);
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// },
			// #ifndef MP
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					var pages = getCurrentPages(),
						prevPage = null;
					if (pages.length > 1) {
						prevPage = pages[pages.length - 2];
					}
					var that = this;
					let data = {
						StartDate: this.startTime,
						EndDate: this.endTime,
						StoreID: this.StoreID,
						EmpID: this.EmpID,
					};
					this.$eventHub.$emit('fire', data);
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// #endif
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},

		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss';
	// $bb-bg-color:rgba(124, 170, 216, 1);
	
	// button::after {
	// 	border: none;
	// 	padding: 0px;
	// }

	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #ebebeb;
	// }

	// .filterWrapper {
	// 	background: #FFF;
	// 	padding-bottom: 15upx;
	// }

	// .title-padding {
	// 	height: var(--status-bar-height);
	// 	background: $bb-bg-color;
	// 	box-sizing: content-box;
	// }

	// .filterHeader {
	// 	width: 100%;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	position: relative;
	// 	text-align: center;
	// 	background: $bb-bg-color;
	// 	color: #FFF;
	// 	font-size: 18px;
	// 	background-size: 100%;

	// 	.pd {
	// 		display: inline-block;
	// 		position: absolute;
	// 		margin-left: 10px;
	// 		top: 30upx;
	// 		left: 0px;
	// 		font-size: 14px;
	// 		width: 40upx;
	// 		height: 40upx;
	// 		background: url(../../static/back.png) no-repeat;
	// 		background-size: 100%;
	// 	}

	// 	.options {
	// 		position: absolute;
	// 		right: 0px;
	// 		top: 10px;
	// 		width: 80px;
	// 		display: flex;
	// 		text-align: right;

	// 		.setting {
	// 			width: 30px;
	// 			height: 30px;
	// 			background: url(../../static/sureFilter.png) no-repeat;
	// 			background-size: 30px;
	// 			border: none;
	// 			margin-left: 90upx;

	// 		}
	// 	}

	// }

	// .filterItem {
	// 	height: 120upx;
	// 	line-height: 120upx;
	// 	background: #FFF;
	// 	display: flex;
	// 	flex-direction: row;
	// 	box-sizing: border-box;
	// 	padding-left: 30upx;
	// 	padding-right: 30upx;
	// 	font-size: 32upx;
	// 	background: #FFF;

	// 	text {
	// 		flex: 1;

	// 		&:last-child {
	// 			text-align: right;
	// 		}
	// 	}

	// 	.stop {
	// 		background-color: rgb(124, 170, 216);
	// 	}


	// 	input {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 50upx;
	// 		border-bottom: 1px solid #ebebeb;
	// 	}

	// 	view.selectInput {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 22upx;
	// 		border-bottom: 1px solid #ebebeb;

	// 		input {
	// 			flex: 1;
	// 			height: 40upx;
	// 			line-height: 40upx;
	// 			margin-top: 50upx;
	// 			border-bottom: 1px solid #ebebeb;
	// 		}
	// 	}
	// }

	// .padding-xl .searchStore {
	// 	display: flex;
	// 	width: 100%;
	// 	margin: auto;
	// 	height: 45px;
	// 	padding-top: 5px;
	// 	font-size: 14px;
	// }
	
	// .padding-xl .searchStore input {
	// 	flex: 1;
	// 	height: 35px;
	// 	border: 1px solid #CCC;
	// 	border-top-left-radius: 5px;
	// 	border-bottom-left-radius: 5px;
	// 	padding-left: 10px;
	// }
	
	// .padding-xl {
	// 	padding: 10px;
	
	// }
	
	// .padding-xl .searchStore button {
	// 	font-size: 14px;
	// 	color: #FFF;
	// 	padding-left: 8px;
	// 	padding-right: 8px;
	// 	height: 35px;
	// 	line-height: 35px;
	// 	border-radius: 0px;
	// 	border-top-right-radius: 5px;
	// 	border-bottom-right-radius: 5px;
	// 	text-align: center;
	// 	background: rgba(124, 170, 216, 1);
	// }
	
	// .padding-xl .StoreListWrap {
	// 	height: 250px;
	// 	overflow: auto;
	// }
	
	// .padding-xl .StoreListWrap view {
	// 	height: 40px;
	// 	line-height: 40px;
	// 	text-align: left;
	// 	border-bottom: 1px solid #CCC;
	// 	padding-left: 8px;
	// }
	
	// .cu-form-group {
	// 	padding: 1px 10px !important;
	// 	height: 40px;
	// 	line-height: 40px;
	// 	min-height: 40px;
	// }
	
</style>
